import { Applet } from "@/api/interface/iot";
import { AuthBtns } from "@/utils/constants";
import { ComponentInternalInstance, getCurrentInstance, PropType } from "vue";
import "./detail.scss";
import { useAuthButtons } from "@/hooks/useAuthButtons";
import { filePrefix } from "@/hooks/useSystem";
import notImg from "@/assets/images/cube/cube-search.png";
import ServerType from "@/components/Sansan/Status/ServerType";

export default defineComponent({
	props: {
		detail: {
			type: Object as PropType<Applet.ResUserApplet>,
			default: () => {}
		}
	},
	emits: [],
	setup(props) {
		const btnList = ref<any[]>([]);
		const readonly = ref(false);
		watch(
			() => props.detail.source,
			() => {
				if (props.detail.source == "develop") {
					useAuthButtons(AuthBtns.appletDevelop).then((res: any) => {
						btnList.value = res.filter((item: any) => item.btnGroup);
						readonly.value = btnList.value.filter((item: any) => item.btnGroup == "1").find((item: any) => item.path == "mod")
							? false
							: true;
					});
				} else {
					readonly.value = true;
				}
			},
			{ deep: true, immediate: true }
		);
		return () => {
			return (
				<div class="p-6 applet-detail-page">
					<Basic detail={props.detail} readonly={readonly.value} />
				</div>
			);
		};
	}
});

const Basic = defineComponent({
	props: {
		readonly: Boolean,
		detail: {
			type: Object as PropType<Applet.ResUserApplet>,
			default: () => {}
		}
	},
	emits: [],
	setup(props) {
		const { proxy } = getCurrentInstance() as ComponentInternalInstance;
		return () => {
			return (
				<>
					<div class="p-6 shadow" style="border: 1px solid #eee;">
						<div class="flex items-center mb-6">
							<el-image src={props.detail.logo ? `${filePrefix()}${props.detail.logo}` : notImg} class="w-[50px] h-[50px]" />
							<div class="flex flex-col ml-6">
								<div class="font-bold mb-2">{props.detail.name}</div>
								<div class="flex">
									<el-text type="info" class="mr-2">
										应用类型：
									</el-text>
									<ServerType v-model={props.detail.type} />
								</div>
							</div>
						</div>
						<el-descriptions column={2}>
							<el-descriptions-item label={proxy?.$t("applet_basicdetail.tablist_label.name")}>
								{props.detail.name}
							</el-descriptions-item>
							<el-descriptions-item label={proxy?.$t("applet_basicdetail.tablist_label.key")}>
								{props.detail.id}
							</el-descriptions-item>
							<el-descriptions-item label={proxy?.$t("applet_basicdetail.tablist_label.version")}>
								{props.detail.version}
							</el-descriptions-item>
							<el-descriptions-item label={proxy?.$t("applet_basicdetail.tablist_label.home")}>
								{props.detail.home}
							</el-descriptions-item>
							<el-descriptions-item label={proxy?.$t("applet_basicdetail.tablist_label.doc")}>
								{props.detail.doc}
							</el-descriptions-item>
							<el-descriptions-item label={proxy?.$t("applet_basicdetail.tablist_label.createTime")}>
								{props.detail.createTime}
							</el-descriptions-item>
							<el-descriptions-item label={proxy?.$t("applet_basicdetail.tablist_label.updateTime")}>
								{props.detail.updateTime}
							</el-descriptions-item>
							<el-descriptions-item label={proxy?.$t("applet_basicdetail.tablist_label.creator")}>
								{props.detail.creator}
							</el-descriptions-item>
							<el-descriptions-item label={proxy?.$t("applet_basicdetail.tablist_label.desc")} span="2">
								{props.detail.desc}
							</el-descriptions-item>
						</el-descriptions>
					</div>
				</>
			);
		};
	}
});
